<template>
  <div class="custom-body">
    <el-scrollbar
      style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
    >
      <div class="office-hall-header">
        <el-image lazy src="/s/static/image/20220826.png" />
        <div class="office-hall-bt">
          <div class="office-hall-custom">
            <el-carousel height="385px">
              <el-carousel-item :key="1">
                <div class="office-hall-h1">上网账号如何修改密码</div>
                <div class="office-hall-p">
                  用户名： 教职工：本人工资号 因公账号：部门首字母加数字组合，由部门代办理人在一网通办搜索【因公网络账号申请】事项进行申请。
                  外聘人员：本人八位数工号
                  学生：本人学号
                  密码：
                  教职工、外聘人员、学生初始密码为身份证后六位，如...
                </div>
              </el-carousel-item>
              <el-carousel-item :key="2">
                <div class="office-hall-h1">邮箱使用常见问题及解决方案</div>
                <div class="office-hall-p">
                  1. 用户邮箱连续收到几十封来自不同邮件地址的系统退信邮件，但是该用户并没有给这些退信邮箱发过信件。该用户的邮箱账号被盗来发送垃圾邮件。修改密码为8位以上“数字+字母+字符”的强密码。修改完密码之后，在72小时内还可能会收到这样的退信，因为一些...
                </div>
              </el-carousel-item>
              <el-carousel-item :key="3">
                <div class="office-hall-h1">VPN使用手册</div>
                <div class="office-hall-p">
                  本部分主要介绍了SSL VPN 客户端的安装和使用。 1.1. 环境要求1、客户端计算机已经接入因特网，并且网络通信正常。2、计算机必须安装浏览器。SSL VPN 客户端支持Windows 操作系统、Linux 操作系统和Mac OS X 操作系统，支持苹果，安卓等手机接入；支持多种...
                </div>
              </el-carousel-item>
              <el-carousel-item :key="4">
                <div class="office-hall-h1">校园无线常见问题</div>
                <div class="office-hall-p">
                  1．为什么无线连接成功打不开认证页面？1) 此无线使用设备以前登陆过其他账号，我们的无线账号都开启着无感知认证，认证一次之后会把MAC地址记录在这个账号下，以后都会通过无感知认证登录这个账号；2) 无线认证的DNS必须是学校默认的DNS（202.117.112.3）...
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="office-hall-content">
        <div class="office-hall-half">
          <div class="office-hall-line">
            服务说明
          </div>
          <div class="office-hall-body">
            怀进鹏强调，立足新时代，要统筹谋划中西部高等教育振兴，有效激发高等教育内生动力和发展活力，推动形成同区域开发开放格局相匹配的高等教育体系，
            建好中西部人才高地和蓄水池，把教育与学科的优势转化为发展优势，把人才和创新的优势转化为竞争优势。一要以“四新”建设引领人才培养范式变革，
            深化组织模式、理论研究、内容方式创新, 全面夯实人才培养基础。二要以数字化赋能中西部高等教育振兴，大力发展“数字化教育”，加强数字化基础设施建设，
            提高师生数字化素养。三要以产学研用深度融合促进中西部高等教育服务能力提升，做好科教协同，做深产教融合，
            持续开展科研攻关和急需紧缺人才培养。四要以扩大开放合作提升中西部高等教育的国际影响和服务国家对外开放能力，大力培养国际化人才，深化国际科技教育合作。
          </div>
          <div class="office-hall-line">
            资料下载
          </div>
          <div class="office-hall-download">
            <div class="office-file-li">
              <el-card shadow="hover">
                <div class="li-content">
                  <div class="custom-image"><el-image :src="doc" /></div>
                  <div class="lin-title">附件名称.doc</div>
                  <div class="lin-size">0.02MB</div>
                </div>
              </el-card>
            </div>
            <div class="office-file-li">
              <el-card shadow="hover">
                <div class="li-content">
                  <div class="custom-image"><el-image :src="excel" /></div>
                  <div class="lin-title">附件名称.xls</div>
                  <div class="lin-size">1.2MB</div>
                </div>
              </el-card>
            </div>
            <div class="office-file-li">
              <el-card shadow="hover">
                <div class="li-content">
                  <div class="custom-image"><el-image :src="zip" /></div>
                  <div class="lin-title">附件名称.zip</div>
                  <div class="lin-size">10.1MB</div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
        <div class="office-hall-half">
          <div class="office-hall-service-li">
            <div class="hall-service-left">
              <div class="hall-service-left-image">
                <el-image :src="gif" />
              </div>
              <div class="hall-service-left-content"><div class="left-body" /></div>
            </div>
            <div class="hall-service-right">
              <div class="hall-service-right-title">服务名称</div>
              <div class="hall-service-right-content">
                <div class="hall-service-right-body">
                  <el-card shadow="always" :style="{ background: 'url('+bak3+') no-repeat 95% 0', backgroundSize: '40% 100%' }">
                    <div class="custom-card">
                      <div class="hall-body">怀进鹏强调，立足新时代，要统筹谋划中西部高等教育振兴，有效激发高等教育内生动力和发展活力，推动形成同区域开发开放格局相匹配的高等教育体系，
                        建好中西部人才高地和蓄水池，把教育与学科的优势转化为发展优势，把人才和创新的优势转化为竞争优势。</div>
                      <div class="hall-service-right-button" />
                      <div class="hall-button"><span style="width: 100%;height: 100%">开始办理</span></div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
          <div class="office-hall-service-li">
            <div class="hall-service-left">
              <div class="hall-service-left-image">
                <el-image :src="gif" />
              </div>
              <div class="hall-service-left-content"><div class="left-body" /></div>
            </div>
            <div class="hall-service-right">
              <div class="hall-service-right-title">服务名称</div>
              <div class="hall-service-right-content">
                <div class="hall-service-right-body">
                  <el-card shadow="always" :style="{ background: 'url('+bak3+') no-repeat 95% 0', backgroundSize: '40% 100%' }">
                    <div class="custom-card">
                      <div class="hall-body">怀进鹏强调，立足新时代，要统筹谋划中西部高等教育振兴，有效激发高等教育内生动力和发展活力，推动形成同区域开发开放格局相匹配的高等教育体系，
                        建好中西部人才高地和蓄水池，把教育与学科的优势转化为发展优势，把人才和创新的优势转化为竞争优势。</div>
                      <div class="hall-service-right-button" />
                      <div class="hall-button"><span style="width: 100%;height: 100%">开始办理</span></div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
          <div class="office-hall-service-li">
            <div class="hall-service-left">
              <div class="hall-service-left-image">
                <el-image :src="gif" />
              </div>
              <div class="hall-service-left-content"><div class="left-body" /></div>
            </div>
            <div class="hall-service-right">
              <div class="hall-service-right-title">服务名称</div>
              <div class="hall-service-right-content">
                <div class="hall-service-right-body">
                  <el-card shadow="always" :style="{ background: 'url('+bak3+') no-repeat 95% 0', backgroundSize: '40% 100%' }">
                    <div class="custom-card">
                      <div class="hall-body">怀进鹏强调，立足新时代，要统筹谋划中西部高等教育振兴，有效激发高等教育内生动力和发展活力，推动形成同区域开发开放格局相匹配的高等教育体系，
                        建好中西部人才高地和蓄水池，把教育与学科的优势转化为发展优势，把人才和创新的优势转化为竞争优势。</div>
                      <div class="hall-service-right-button" />
                      <div class="hall-button"><span style="width: 100%;height: 100%">开始办理</span></div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'OfficeHallV2',
  data() {
    return {
      doc: require('@/assets/images/doc.png'),
      eps: require('@/assets/images/eps.png'),
      excel: require('@/assets/images/excel.png'),
      gif: require('@/assets/images/gif.png'),
      pdf: require('@/assets/images/pdf.png'),
      ppt: require('@/assets/images/ppt.png'),
      txt: require('@/assets/images/txt.png'),
      zip: require('@/assets/images/zip.png'),
      bak3: require('@/assets/images/003.png')
    }
  }
}
</script>

<style scoped>
.custom-body {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
  padding: 0px 5px;
  box-sizing: border-box;
}

.office-hall-header {
  flex: 0 1 auto;
  width: 100%;
  height: 385px;
  position: relative;
}
.office-hall-bt {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
}

.office-hall-header .el-image {
  width: 100%;
  height: 100%;
}

.office-hall-content {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.office-hall-half {
  width: 50%;
  height: 100%;
  flex: 0 1 auto;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}

.office-hall-line {
  width: 100%;
  height: 50px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  font-size: 20px;
  font-weight: bold;
  line-height: 50px;
  text-indent: 20px;
}

.office-hall-body {
  width: 100%;
  height: auto;
  line-height: 40px;
  text-indent: 20px;
}

.office-hall-download {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
}

.office-file-li {
  width: 33.333%;
  flex: 0 1 auto;
  height: 80px;
  padding: 5px 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.li-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.custom-image {
  flex: 0 1 auto;
  width: 60px;
  height: 60px;
}
.lin-title {
  flex:  1 1 auto;
  height: 60px;
  line-height: 60px;
}
.lin-size {
  flex: 0 1 auto;
  height: 60px;
  width: 50px;
  font-size: 13px;
  color: #909399;
  line-height: 96px;
  text-align: center;
}
.office-hall-service-li {
  flex: 0 1 auto;
  width: 100%;
  height: 180px;
  display: flex;
  flex-flow: row nowrap;
}
.hall-service-left {
  flex: 0 1 auto;
  width: 40px;
}
.hall-service-right {
  flex: 1 1 ;
  box-sizing: border-box;
}
.hall-service-left,.hall-service-right {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.hall-service-right-title {
  line-height: 32px;
  font-size: 18px;
}
.hall-service-left-image,.hall-service-right-title {
  width: 100%;
  height: 40px;
  flex: 0 1 auto;
  padding: 4px;
  box-sizing: border-box;
}
.hall-service-left-image .el-image {
  width: 100%;
  height: 100%;
}
.hall-service-right-content {
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
}
.hall-service-left-content {
  padding: 0px 16px;
}
.hall-service-right-content,.hall-service-left-content{
  box-sizing: border-box;
  flex: 1 1 auto;
}
.hall-body {
  line-height: 25px;
  text-indent: 20px;
  height: 100%;
  flex: 0 1 auto;
  width: calc(100% - 40px);
}
.left-body {
  width: 100%;
  height: 100%;
  background-color: #409EFF;
  border-radius: 4px;
}
.hall-service-right-body {
  width: 100%;
  height: 100%;
}
.custom-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  padding: 5px 10px;
  box-sizing: border-box;
  position: relative;
}
.hall-service-right-button {
  flex: 0 1 auto;
  height: 100%;
  width: 40px;
  text-align: center;
  color: #ffffff;
  padding: 12px 0px;
  box-sizing: border-box;
}
.hall-button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 50px;
  bottom: -5px;
  background-color: #00a0e9;
  padding: 21px 17px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
}
.hall-button:hover{
  background-color: #0a84ff;
}
.office-hall-custom {
  width: 100%;
  height: 100%;
  padding: 89px;
  box-sizing: border-box;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
.el-card {
  width: 100%;
  height: 100%;
}
.el-card >>> .el-card__body {
  padding: 5px;
  height: 100%;
}
.office-hall-h1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 6px;
}
.office-hall-p {
  line-height: 30px;
  text-indent: 30px;
  margin-top: 30px;
  width: 50%;
  color: #fff;
  font-weight: 580;
}
.el-carousel >>> .el-carousel__indicators--horizontal{
  display: none;
}
</style>
